<template>
	<view>
		<view class="search">
			<view class="search-r">
				<u-search :focus="focus" @custom="keywords = '';search()" height="88" input-align="center" action-text="取消" :show-action="keywords" :action-style="{color:'#de1f1c','margin-left':'0','margin-right':'20rpx'}" bg-color="#fff" @search="search" placeholder="搜索你需要的" v-model="keywords"></u-search>
			</view>
		</view>
		
		<view class="dropdown" id="dropdown">
			<u-dropdown @open="open" ref="dropdown" menu-icon="arrow-down-fill" menu-icon-size="18" active-color="#de1f1c">
				<u-dropdown-item :title="isSelectCity ? isSelectCity.name : '区域'">
					<drop-city-select @city-change="cityChange"></drop-city-select>
				</u-dropdown-item>
				<u-dropdown-item :title="housetype ? housetype.name : '类型'" v-model="vm2" @change="chengeItem($event,1)" height="500" :options="navList.map(item=>({label:item.name,value:item.id}))"></u-dropdown-item>
				<u-dropdown-item :title="areaType ? `${areaType.min}-${areaType.max}m²` :'配套'" v-model="vm3" @change="chengeItem($event,2)" height="500" :options="com_area.map(item=>({label:`${item.min}-${item.max}m²`,value:item.id}))"></u-dropdown-item>
			</u-dropdown>
		</view>
		
		<!-- 更多列表 热门新房 -->
		<view class="more-list">
			<view class="more-item u-flex" v-for="item in list" :key="item.id" @click="jump(`/pages/house/land/detail?id=${item.id}`)">
				<view class="image">
					<u-image width="206" height="160" border-radius="18" :src="imgUrl(item.images)"></u-image>
				</view>
				<view class="info u-flex-1">
					<view class="title u-flex">
						<view class="name u-flex-1 u-ellipsis">{{item.name}}</view>
						<view class="label">
							<text v-if="item.is_selected_switch">精选</text>
							<text v-if="item.status === '1'" class="wait">待售</text>
							<text v-if="item.status === '2'">在售</text>
							<text v-if="item.status === '3'" class="wait">售完</text>
						</view>
					</view>
					<view class="position u-ellipsis" style="height: 32rpx;">{{item.title}}</view>
					<view class="label-list u-ellipsis">
						<text v-for="f in item.housebaseset_features" :key="f.id">{{f.name}}</text>
					</view>
					<view class="price-box u-flex">
						<view class="price">{{Number(item.totalprice)}}万</view>
						<view class="text">{{Number(item.unitprice)}}元/m²</view>
					</view>
				</view> 
			</view>
		</view>
		<u-empty v-if="isEmpty" text="暂无相关信息" margin-top="200"></u-empty>
		
		<view style="padding-bottom: 10rpx;" v-if="p > 1">
			<u-loadmore :status="status" />
		</view>
		<view class="safe-area-inset-bottom"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keywords:'',
				p:1,
				list:[],
				status:'loading',
				navList:'',
				
				title:'',
				type_id:'',
				isSelectCity:'',//选中的城市
				housetype:'',
				areaType:'',

				vm2:'',
				vm3:'',
				focus:!1,
				isEmpty:!1
			}
		},
		methods: {
			open(index){
				uni.pageScrollTo({
					selector:'#dropdown'
				})
			},
			getList(){
				this.status = 'loading'
				this.$u.api.land.index({
					type_id:this.housetype.id || this.type_id || '',
					p:this.p,
					keywords:this.keywords,
					region_id:this.isSelectCity.id || '',
					area_id:this.areaType.id || '',
				}).then(res=>{
					this.list = this.p == 1 ? res : this.list.concat(res)
					this.status = res.length  === 20 ? 'loadmore' : 'nomore'
					this.isEmpty = this.p === 1 && res.length === 0 ? !0 : !1
					uni.stopPullDownRefresh()
				})
			},
			cityChange(e){
				if(e){
					this.isSelectCity = e.city
					this.$refs.dropdown.highlight(0,!0)
				}else{
					this.isSelectCity = ''
					this.$refs.dropdown.highlight(0,!1)
				}
				this.p = 1
				this.getList()
				this.$refs.dropdown.close()
			},
			chengeItem(e,index){
				if(index === 1){
					if(this.navList[e].id === this.housetype.id){
						this.housetype = ''
						this.vm2 = ''
						this.$refs.dropdown.highlight(index,!1)
					}else{
						this.housetype = this.navList[e]
						this.$refs.dropdown.highlight(index,!0)
					}
				}
				
				if(index === 2){
					if(this.com_area[e].id === this.areaType.id){
						this.areaType = ''
						this.vm3 = ''
						this.$refs.dropdown.highlight(index,!1)
					}else{
						this.areaType = this.com_area[e]
						this.$refs.dropdown.highlight(index,!0)
					}
				}
				this.p = 1
				this.getList()
			},
			search(){
				this.p = 1
				this.getList()
			}
		},
		onLoad({focus,id,title,keywords}) {
			this.keywords = keywords || ''
			this.type_id = id || ''
			this.focus = focus ? !0 : !1
			this.title = title || ''
			this.getList()
			this.$u.api.land.type().then(res=>this.navList = res)
		},
		onReachBottom() {
			if(this.status == 'loadmore'){
				this.p ++
				this.getList()
			}
		},
		onReady() {
			this.title && this.$app.setTitle(this.title)
		}
	}
</script>

<style lang="scss">
	// 搜索框
	.search{padding: 0rpx 18rpx 10rpx;
		.search-r{border-radius: 100rpx;box-shadow: 0 4rpx 8rpx #ddd;background-color: #fff;border: 1rpx solid #ddd;}
	}
	// 底部更多列表
	.more-list{
		background-color: #fff;padding: 0 30rpx 20rpx;position: relative;
		.more-item{
			padding: 30rpx 0 10rpx 0;
			.image{
				image{width: 206rpx;height: 160rpx;border-radius: 20rpx;display: block;}
			}
			.info{
				margin-left: 20rpx;overflow: hidden;
				.title{
					.name{font-size: 30rpx;
							font-weight: bold;
							// line-height: 30rpx;
					  //   max-height: 60rpx;
					  //   overflow: hidden;
					  //   display: -webkit-box;
					  //   -webkit-line-clamp: 2;
					  //   -webkit-box-orient: vertical
					}
					.label{align-self: flex-start;
						text{background-color: $tc;color: #fff;font-size: 24rpx;padding: 2rpx 8rpx;border-radius: 6rpx;margin: 0 6rpx;}
						.wait{background-color: #999;}
					}
				}
				.position{font-size: 24rpx;color: #666;}
				.label-list{white-space: nowrap;
					text{color: #ffa100;font-size: 26rpx;margin-right: 20rpx;
						&:last-child{margin-right: 0;}
					}
				}
				.price-box{
					.price{color: #f00;font-size: 30rpx;font-weight: bold;}
					.text{margin-left: 30rpx;font-size: 26rpx;color: #666;}
				}
			}
			
		}
		.more{text-align: center;font-size: 30rpx;color: #666;padding: 20rpx 0 10rpx 0;
			.iconfont{margin-left: 14rpx;}
		}
	}
	
	.dropdown{
		border-bottom: 1rpx solid #ddd;position: sticky;top: 0;width: 100%;background-color: #fff;z-index: 11;
	}
</style>